import React, { useEffect, useState } from 'react';
import { useNavigate, useLocation } from "react-router-dom";
import {
	Row, Col, Modal, Dropdown, List, Button, Drawer,
	notification, Badge, Tag, Form, Input, Switch
} from "antd";
import {
	PoweroffOutlined, LogoutOutlined, RedoOutlined,
	UserOutlined, LockOutlined, BellOutlined, ArrowRightOutlined
} from '@ant-design/icons';
import PubSub from "pubsub-js";
import moment from "moment";
import Cache from "../../utils/Cache";
import {getUUID, isEmpty, tailFormItemLayout} from "../../utils/cmn";
import { URL } from "../../server/enum";
import {SubEvent} from "../../server/enum";
import '../index.less'



const User = () => {
	const [form] = Form.useForm();
	const navigate = useNavigate();
	const location = useLocation();
	const [userName, setUserName] = useState('');
	const [powerOpen, setPower] = useState(false);

	// componentDidMount
	useEffect(() => {
		const userInfo = Cache.getUserInfo();
		if (userInfo && userInfo['username']) {
			setUserName(userInfo['username'])
		}
		else if (window.location.pathname.indexOf('/login')<0 && window.location.pathname.indexOf('/share')<0) {
			navigate('/login')
		}

		return () => {}

	}, []);

	// 登出
	const logOut = () => {
		let uuid = getUUID()
		Cache.removeUserInfo();
		navigate('/login')
	}

	//
	const powerItems = [
		{
			key: '1',
			label: (
				<Row type={'flex'} align={'middle'} style={{padding: '5px'}} onClick={logOut}>
					<LogoutOutlined style={{fontSize: '20px'}}/>
					<span style={{fontSize: '16px', marginLeft: '10px'}}>登出</span>
				</Row>
			),
		},
	];

	return (
		<Row type={'flex'} align={'middle'} style={{marginRight: '1vw'}}>
			<span
				style={{marginLeft: '30px', color:  'whitesmoke', fontSize: '16px', cursor: 'pointer'}}
				onClick={()=>{navigate('/home')}}
			>返回首页</span>
			<ArrowRightOutlined
				style={{marginLeft: '5px', fontSize: '22px', cursor: 'pointer', color: 'white'}}
				onClick={()=>{navigate('/home')}}
			/>

			<Dropdown
				menu={{items: powerItems}}
				onOpenChange={open => setPower(open)}
				open={powerOpen}
				trigger={'click'}
				placement="bottomRight"
			>
				<PoweroffOutlined style={{marginLeft: '34px', fontSize: '24px', cursor: 'pointer', color: 'white'}}/>
			</Dropdown>
			<div>
				<UserOutlined style={{marginLeft: '30px', fontSize: '24px', cursor: 'pointer', color: 'white'}}/>
				<span style={{fontSize: '24px', cursor: 'pointer', color: 'white'}}>{userName}</span>
			</div>
		</Row>
	);
};

export default User;
